<template>
    <div class="admin-layout">
        <el-row>
            <el-col :span="4">
                <div class="layout-sidebar">
                    <div class="aminder">
                        <i class="el-icon-user"></i>
                        <span>管理员：</span><i>小谢</i>
                    </div>
                    <el-menu
                        :default-active="activeIndex"
                        class="el-menu-vertical-demo"
                        @select="handleSelect"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b"
                        router
                    >
                        <el-menu-item index="/admin/home">
                            <i class="el-icon-s-home"></i>
                            <span slot="title">首页</span>
                        </el-menu-item>
                        <el-menu-item index="/admin/user">
                            <i class="el-icon-user"></i>
                            <span slot="title">用户管理</span>
                        </el-menu-item>
                        <el-menu-item index="/admin/maintainer">
                            <i class="el-icon-document"></i>
                            <span slot="title">维修员管理</span>
                        </el-menu-item>
                        <el-menu-item index="/admin/order">
                            <i class="el-icon-chat-dot-round"></i>
                            <span slot="title">订单管理</span>
                        </el-menu-item>
                        <el-menu-item index="/admin/adminer">
                                <i class="el-icon-s-custom"></i>
                                <span slot="title">管理员管理</span>
                            </el-menu-item>
                        <el-menu-item index="/admin/comment">
                            <i class="el-icon-edit"></i>
                            <span slot="title">修改密码</span>
                        </el-menu-item>
                        <el-menu-item index="/adlogin">
                            <i class="el-icon-s-custom"></i>
                            <span slot="title">退出登录</span>
                        </el-menu-item>
                    </el-menu>
                </div>
            </el-col>
            <el-col :span="20">
                <div class="layout-content">
                    <router-view></router-view>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { Message } from 'element-ui'
export default {
  data () {
    return {
      activeIndex: '/admin/home'
    }
  },
  created () {
    this.activeIndex = this.$route.path
  },
  methods: {
    async handleSelect (key, keyPath) {
      this.activeIndex = key
      if (key === '/adlogin') {
        await Message.success('退出成功')
        this.$store.commit('adminStore/setAdminInfo', {})
        console.log(key)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.admin-layout{
    min-height: 500px;
.el-row{
    height: 100vh;
    .el-col{
        height: 100%;
        .layout-sidebar{
            height: 100%;
            background-color: #545C64;
            border-right: 1px solid #ccc;
            .aminder{
                padding: 30px ;
                font-size: 16px;
                color: #fff;
                font-weight: bold;
                // text-align: center;
            }
        }
        .layout-content{
            height: 100%;
            padding: 15px 30px;
            // background-color: #545C64;
            // color: #fff;
        }
    }
}
}

</style>
